<template>
  <el-form inline>
    <el-form-item v-for="(item, i) in searchOptions" :key="i" :label="item.label">
      <el-input v-if="item.type === 'input'" v-model="searchForm[item.prop]" :placeholder="item.placeholder || '请输入'" style="width: 240px"
        clearable />
      <el-select v-if="item.type === 'select'" v-model="searchForm[item.prop]" clearable style="width: 240px"
        :placeholder="item.placeholder || '请选择'">
        <el-option v-for="dict in item.options" :key="dict.value" :label="dict.label" :value="dict.value" />
      </el-select>
      <el-date-picker v-if="item.type === 'dateRange'" style="width: 308px" type="daterange" v-model="searchForm[item.prop]"
        :format="item.format || 'YYYY-MM-DD'" :value-format="item.valueFormat || 'YYYY-MM-DD'" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期" @change="(value) => changeDateRange(item.prop, value)" />
      <el-date-picker v-if="item.type === 'datetimerange'" size="small" type="datetimerange" style="width: 308px" v-model="searchForm[item.prop]"
        format="YYYY-MM-DD HH:mm:ss" :value-format="item.valueFormat || 'YYYY-MM-DD HH:mm:ss'" :default-time="['00:00:00', '23:59:59']"
        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="(value) => changeDateRange(item.prop, value)" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="search" @click="handleSearch">查 询</el-button>
      <el-button v-if="hasAdd" type="primary" icon="plus" @click="handleAdd">新 增</el-button>
      <el-button v-if="hasImport" type="primary" icon="upload" @click="handleImport">导 入</el-button>
      <el-button v-if="hasExport" type="primary" icon="download" @click="handleExport">导 出</el-button>
      <el-button v-if="hasRefresh" icon="Refresh" @click="handleRefresh">重 置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup name="SearchForm">
import { onBeforeMount } from 'vue'

const props = defineProps({
  searchForm: { type: Object, default: {} },
  searchOptions: { type: Array, default: [] },
  hasAdd: { type: Boolean, default: false },
  hasImport: { type: Boolean, default: true },
  hasExport: { type: Boolean, default: true },
  hasRefresh: { type: Boolean, default: false }
})
onBeforeMount(() => {})

const $emit = defineEmits(['handleSearch', 'handleAdd', 'changeDateRange', 'handleImport', 'handleExport', 'handleRefresh'])
function handleSearch() {
  $emit('handleSearch')
}
function handleAdd() {
  $emit('handleAdd')
}
function changeDateRange(prop, value) {
  $emit('changeDateRange', prop, value)
}
function handleImport() {
  $emit('handleImport')
}
function handleExport() {
  $emit('handleExport')
}
function handleRefresh() {
  $emit('handleRefresh')
}
</script>